<template>
    <div>
      <h3>生命周期</h3>
       {{flower}}
       <button @click="changeType">换个品类</button>
    </div>
  </template>
  
  <script setup lang='ts' name="Demo17">
  import { ref, onBeforeMount,onMounted,onBeforeUpdate,onUpdated, onBeforeUnmount,onUnmounted} from 'vue'
  let flower = ref<string>('花朵')
  console.log("哈哈")
  onBeforeMount(()=>{
      console.log("挂载前")
  }) 
  onMounted(()=>{
      console.log("挂载后")
  })
  onBeforeUpdate(()=>{
      console.log("更新前")
  })
  onUpdated(()=>{
      console.log("更新后")
  })
  onBeforeUnmount(()=>{
      console.log("卸载前")
  })
  onUnmounted(()=>{
      console.log("卸载后")
  })
  function changeType() {
      flower.value = '牡丹'
  }
  </script>
  <style lang='scss' scoped>
  
  </style>